/**
 *
 * @author zzhijie
 * @date 2021-02-07
 */
import FSearch from "./module/search";
import FTable from "./module/table";
import FDialog from "./module/dialog";
import FPage from "./module/page";
import FBtn from "./module/btn";
import FAddBtn from "./module/add-btn";
import FColumnToggle from "./module/column-toggle";
import mixin from "./mixins/mixin";
import adapterMixin from "./mixins/adapter-mixin";
import "./style.css";

export default {
  name: "f-crud",
  mixins: [mixin, adapterMixin],
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    data: {
      type: Array,
      default: () => ([]),
    },
    page: {
      type: Object,
      default: () => ({}),
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    FSearch,
    FTable,
    FDialog,
    FPage,
    FBtn,
    FAddBtn,
    FColumnToggle,
  },
  computed: {
    params() {
      let fSearch = this.$fSearch;
      return fSearch ? fSearch.params : {};
    },
    $fTable() {
      return this.$refs.table;
    },
    $table() {
      let {table} = this.$refs;
      return table ? table.$refs.table : null;
    },
    $fDialog() {
      return this.$refs.dialog;
    },
    $dialog() {
      let {dialog} = this.$refs;
      return dialog ? dialog.$refs.dialog : null;
    },
    $fSearch() {
      return this.$refs.search;
    },
  },
  data() {
    return {
      crudConfig: this.$getGlobalConfig('crud'),
      curRow: {},
      title: "",
      event: "",
      showTable: true,
    };
  },
  methods: {
    /**
     * 弹出表格列显隐
     */
    showColumnToggle() {
      this.$refs["column-toggle"].visible = true;
    },
    /**
     * 切换表格列显隐
     * @param showIndexList
     * @param hideIndexList
     */
    handleColumnToggle({showIndexList, hideIndexList}) {
      this.showColumns(showIndexList, "$table");
      this.hideColumns(hideIndexList, "$table");
    },
    /**
     * 显示新增弹窗
     * @param title
     */
    showAdd(title = "新增") {
      this.handlePresetEvent(null, {event: "add", title});
    },
    /**
     * 显示编辑弹窗
     * @param row
     * @param title
     */
    showEdit(row, title = "编辑") {
      this.handlePresetEvent(row, {event: "edit", title});
    },
    /**
     * 显示查看弹窗
     * @param row
     * @param title
     */
    showView(row, title = "查看") {
      this.handlePresetEvent(row, {event: "view", title});
    },
    /**
     * 提交搜索
     */
    submitSearch(resetCurrentPage = true) {
      let {current = "currentPage"} = this.config.pageProp || this.crudConfig.pageProp || {};
      if (resetCurrentPage) this.page[current] = 1;
      this.emitEvent("submit-search", this.params);
    },
    /**
     * 重置搜索
     */
    resetSearch() {
      let resetSearch = this.$listeners['reset-search'] || this.$listeners['resetSearch'];
      if (resetSearch) {
        this.emitEvent("reset-search", this.params);
      } else {
        this.submitSearch();
      }
    },
  },
  render() {
    let {searchable = true, pageable = true, addable = true, showColumnToggle = false, addPermission} = this.config;
    return (
      <section class="f-crud">
        {searchable &&
          <f-search
            ref="search"
            config={this.config}
            page={this.page}
            on={this.$listeners}
            scopedSlots={this.$scopedSlots}/>}
        {(addable || this.$scopedSlots.add) &&
          <el-form nativeOnSubmit={e => e.preventDefault()}>
            <el-form-item>
              {addable && <f-add-btn config={this.config} permission={addPermission}/>}
              {this.$scopedSlots.add && this.$scopedSlots.add()}
              {showColumnToggle &&
                <el-tooltip class="f-r" effect="dark" content="显隐列" placement="top">
                  <el-button icon="el-icon-menu" circle on-click={this.showColumnToggle}/>
                </el-tooltip>
              }
            </el-form-item>
          </el-form>
        }
        {this.showTable &&
          <f-table
            ref="table"
            on-customEvent={this.handleCustomEvent}
            loading={this.tableLoading}
            config={this.config}
            data={this.data}
            on={this.$listeners}
            scopedSlots={this.$scopedSlots}/>
        }
        {pageable &&
          <f-page
            ref="page"
            page={this.page}
            config={this.config}
            data={this.data}
            on={this.$listeners}
            scopedSlots={this.$scopedSlots}/>}
        <f-dialog
          ref="dialog"
          event={this.event}
          title={this.title}
          config={this.config}
          data={this.curRow}
          on={this.$listeners}
          scopedSlots={this.$scopedSlots}/>
        <f-column-toggle
          ref="column-toggle"
          on-columnToggle={this.handleColumnToggle}
          config={this.config}
        />
      </section>
    );
  },
};
